<page-header model="ctrl.navModel"></page-header>

<div class="page-container page-body">
  <div ng-if="ctrl.notifications.length">
    <div class="page-action-bar">
      <div class="page-action-bar__spacer"></div>

      <a href="alerting/notification/new" class="btn btn-primary">
        New channel
      </a>
    </div>

    <table class="filter-table filter-table--hover">
      <thead>
        <th style="min-width: 200px">
          <strong>Name</strong>
        </th>
        <th style="min-width: 100px">Type</th>
        <th style="width: 1%"></th>
      </thead>
      <tbody>
        <tr ng-repeat="notification in ctrl.notifications">
          <td class="link-td">
            <a href="alerting/notification/{{notification.id}}/edit">
              {{notification.name}}
            </a>
          </td>
          <td class="link-td">
            <a href="alerting/notification/{{notification.id}}/edit">
              {{notification.type}}
            </a>
          </td>
          <td class="text-right">
            <span class="btn btn-secondary btn-small" ng-show="notification.isDefault == true">
              default
            </span>
            <a ng-click="ctrl.deleteNotification(notification.id)" class="btn btn-danger btn-small">
              <icon name="'times'" style="margin-top: 2px"></icon>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-if="ctrl.notifications.length === 0">
    <empty-list-cta
      title="'There are no notification channels defined yet'"
      buttonIcon="'channel-add'"
      buttonLink="'alerting/notification/new'"
      buttonTitle="'Add channel'"
      proTip="'You can include images in your alert notifications.'"
      proTipLink="'http://docs.grafana.org/alerting/notifications/'"
      proTipLinkTitle="'Learn more'"
      proTipTarget="'_blank'"
    />
  </div>
</div>

<footer />
